<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example 01.02 -First Scene</title>
    <script src="../../public/javascripts/three.js"></script>
    <script src="../../public/javascripts/stats.js"></script>
    <script src="../../public/javascripts/dat.gui.js"></script>
    <script src="../../public/javascripts/jquery-1.9.0.js"></script>
    <style>
        body{
            margin:0;
            overflow:hidden;
        }
    </style>
</head>
<body>
<div id="Stats-output"></div>
<div id="WebGL-output">
</div>
<script >
    function initStats() {
        var stats=new Stats();
        stats.setMode(0);
        stats.domElement.style.position='absolute';
        stats.domElement.style.left='0px';
        stats.domElement.style.top='0px';
        $("#Stats-output").append(stats.domElement);
        return stats;
    }
    $(function () {
        var stats=initStats();
        var scene=new THREE.Scene();
        var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
        var renderer=new THREE.WebGLRenderer();
        renderer.setClearColor('white', 1.0);
        renderer.setSize(window.innerWidth,window.innerHeight);
        renderer.shadowMapEnabled=true;
//        var axes=new THREE.AxisHelper(20);
//        scene.add(axes);

        scene.fog=new THREE.FogExp2(0xffffff,0.015);

//        scene.overrideMaterial=new THREE.MeshLambertMaterial({color:0xffffff});

        var planeGeometry=new THREE.PlaneGeometry(60,40,1,1);
        var planeMaterial=new THREE.MeshLambertMaterial({color:0xffffff});
        var plane=new THREE.Mesh(planeGeometry,planeMaterial);
        plane.receiveShadow=true;
        plane.rotation.x=-0.5*Math.PI;
        plane.position.x=0;
        plane.position.y=0;
        plane.position.z=0;
        scene.add(plane);

        camera.position.x=-30;
        camera.position.y=40;
        camera.position.z=30;
        camera.lookAt(scene.position);

        var ambientLight=new THREE.AmbientLight(0x0c0c0c);
        scene.add(ambientLight);

        var spotLight=new THREE.SpotLight(0xffffff);
        spotLight.position.set(-40,60,-10);
        spotLight.castShadow=true;
        scene.add(spotLight);

        $("#WebGL-output").append(renderer.domElement);

        var step=0;

        var controls=new function () {
            this.rotationSpeed=0.02;
            this.numberOfObjects=scene.children.length;

            this.removeCube=function () {
                var allChildren=scene.children;
                var lastObject=allChildren[allChildren.length-1];
                if(lastObject instanceof THREE.Mesh){
                    scene.remove(lastObject);
                    this.numberOfObjects=scene.children.length;
                }
            };
            this.addCube=function () {
                var cubeSize=Math.random()*9;
                var cubeGeometry=new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize);
                var cubeMaterial=new THREE.MeshLambertMaterial({color:Math.random()*0xffffff});
                var cube=new THREE.Mesh(cubeGeometry,cubeMaterial);
                cube.castShadow=true;
                cube.name="cube-"+scene.children.length;

                cube.position.x=Math.random()*planeGeometry.width-30;
                cube.position.y=Math.random()*8;
                cube.position.z=Math.random()*planeGeometry.width-20;
                scene.add(cube);
                this.numberOfObjects=scene.children.length;
            };

            this.outputObjects=function () {
                console.log(scene.children);
            }

        };

        var gui=new dat.GUI();
        gui.add(controls,'rotationSpeed',-0.5,0.5);
        gui.add(controls,'addCube');
        gui.add(controls,'removeCube');
        gui.add(controls,'numberOfObjects').listen();
        gui.add(controls,'outputObjects');


        function renderScene() {
            stats.update();

            scene.traverse(function (e) {
                if(e instanceof THREE.Mesh&&e!=plane){
                    e.rotation.x+=controls.rotationSpeed;
                    e.rotation.y+=controls.rotationSpeed;
                    e.rotation.z+=controls.rotationSpeed;
                }
            });


            requestAnimationFrame(renderScene);
            renderer.render(scene,camera);
        }


        renderScene();
    });

</script>
</body>
</html>